<template>
    <d2-container>
        <el-dialog :visible.sync="changeAmountShow" title='修改课节'>
            <el-input v-model='amount' type='number' min='1' step='1'></el-input>
            <div slot="footer" class="dialog-footer">
                <el-button  @click="changeAmountShow = false" type='secondary'>关闭</el-button>
                <el-button type="primary" @click="changeAmountConfirm">确认</el-button>

              </div>
        </el-dialog>
        <el-main>
            <h3>{{class_order.class.name}}({{class_order.createdAtText}})</h3>

            <h1>上课学生</h1>
            <el-table :data="studentIn" border style="width: 100%;">
                <el-table-column prop="student.name" label="姓名"></el-table-column>
                <el-table-column prop="student.gender" label="性别"></el-table-column>
                <el-table-column prop="amount" label="课节">
                    <template slot-scope='scope'>
                        <span>{{scope.row.amount}}</span>
                        <el-button style='float: right' @click='changeAmount(scope.$index)'>修改</el-button>
                    </template>
                </el-table-column>
               <!--  <el-table-column  label="补课">
                    <template slot-scope='scope'>
                           {{scope.row.fillStatus == 1 ? '是' : '否'}}
                        </template>
                </el-table-column> -->
                <el-table-column label="备注">
                        <template slot-scope='scope'>
                            {{scope.row.memo}}
                            <el-button @click='editMemo(scope.$index,0)'  style='position: absolute;right:5px;height: 70%;top:15%'>修改备注</el-button>
                        </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope='scope'>
                        <el-button @click='gotoStudent(scope.row.student._id)'>查看</el-button>
                        <el-button @click='absent(scope.row._id)'>缺席</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <h1>缺课学生</h1>
            <el-table :data="studentOut" border style="width: 100%;">
                <el-table-column prop="student.name" label="姓名"></el-table-column>
                <el-table-column prop="student.gender" label="性别"></el-table-column>
                <el-table-column label="备注">
                        <template slot-scope='scope'>
                            {{scope.row.memo}}
                            <el-button @click='editMemo(scope.$index,1)' style='position: absolute;right:5px;height: 70%;top:15%'>修改备注</el-button>
                        </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope='scope'>
                        <el-button @click='gotoStudent(scope.row.student._id)'>查看</el-button>
                        <el-button @click='show(scope.row._id)'>出席</el-button>
                        <el-button @click='fill(scope.$index)'>补课</el-button>
                        

                    </template>
                </el-table-column>
            </el-table>

            


        </el-main>

        <el-dialog title="修改备注" :visible.sync="showDialog">
              <el-input placeholder="输入备注" v-model="memo" size="small">
                
              </el-input>
              
              <div slot="footer" class="dialog-footer">
                <el-button  @click="showDialog = false" type='secondary'>关闭</el-button>
                <el-button type="primary" @click="editMemoConfirm">确认</el-button>

              </div>
            </el-dialog>

        <el-dialog title="选择补课（不会影响提成和课时，只影响考勤率）" :visible.sync="fillShow">
                <text>学生：{{student}}</text>
              <el-table :data="studentOrderList">
                <el-table-column property="class.name" label="上课班级"></el-table-column>
                <el-table-column property="teacher.name" label="授课老师"></el-table-column>
                <el-table-column property="time" label="开课时间"></el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <el-button @click="selectFill(scope.$index)" type="text">选择</el-button>
                  </template>
                </el-table-column>
            </el-table>
              <div slot="footer" class="dialog-footer">
                <el-button  @click="fillShow = false" type='secondary'>关闭</el-button>
              </div>
        </el-dialog>

    </d2-container>
</template>


<script>
    import request from "@/plugin/axios";
    import formatTime from '@/libs/util.formatTime'
    export default {

        data() {
            return {

                class_order: {class:{name:'',createdAtText:''}},
                class_order_id:undefined,
                studentIn:[],
                studentOut:[],
                showDialog :false,
                memo:'',
                index : -1,
                memoType : 0,
                fillShow :false,
                studentOrderList : [],
                student : '',
                record :{},
                changeAmountShow :false,
                changeIndex : -1,
                amount : undefined

            };
        },
        methods: {

            editMemo(index,type){
                this.memoType = type
                this.index = index
                if (type == 0){
                    this.memo = this.studentIn[index].memo
                }
                else if (type == 1){
                    this.memo = this.studentOut[index].memo
                }
                this.showDialog = true
                
            },
            changeAmount(index){
                this.amount = this.studentIn[index].amount
                this.changeAmountShow = true
                this.changeIndex = index
            },

            changeAmountConfirm(){
                this.$confirm('修改课时会对授课提成产生影响，也会扣学生课时，如果提成已经发放，请联系财务进行下一步操作。','确定要修改课时吗？',{
                    confirmButtonText : '确定',
                    cancelButtonText: "取消",
                    type: "warning"

                }).then(value=>{

                    let data = {}
                    data.id = this.studentIn[this.changeIndex]._id
                    data.amount = this.amount
                    request({
                    url :'/classOrder/changeStudentRecordAmount',
                    method : 'post',
                    data : data
                }).then(res =>{
                    if (res.code == 200){
                        this.$message('修改成功！')
                        this.amount = undefined
                        this.changeIndex = -1
                        this.changeAmountShow = false
                        this.getClassOrderDetail()
                    }
                    else if (res.code == 202){
                        this.$alert('该学生余额不足！','无法操作')
                    }
                })
                }).catch(e=>{

                })
            },

            fill(index){
                this.fillShow = true
                this.student = this.studentOut[index].student.name
                let thisData = this.studentOut[index]
                this.record = this.studentOut[index]
                request({
                    url :'/classOrder/getStudentOrderFillList',
                    method : 'post',
                    data : {student:thisData.student._id}
                }).then(res =>{
                    if (res.code == 200){
                        // this.studentOrderList = [{class:{name:'记录上课'},teacher:{name:'不会自动计算提成,也不扣课时'}}]
                        this.studentOrderList = []
                        res.data.forEach((value,index)=>{
                            res.data[index].time = formatTime.formatTime(value.classOrder.createdAt)
                        })
                        this.studentOrderList = this.studentOrderList.concat(res.data)
                    }
                })
            },

            selectFill(index){
                let data ={}
                data.fillID = (index == 0 ? '' : this.studentOrderList[index]._id)
                data.id = this.record._id

                this.$confirm('选择后，不会重复扣课时和调整提成，只影响上课率。','确定选择该课时为补课时间吗？',{
                    confirmButtonText:'确定',
                    cancelButtonText : '取消'
                }).then(()=>{

                    request({
                    url :'/classOrder/fillStudentOrder',
                    method : 'post',
                    data : data
                }).then(res =>{
                    if (res.code == 200){
                        this.fillShow = false
                        this.$message('补课成功！')
                        this.getClassOrderDetail()
                    }
                    })
                })
                
            },

            editMemoConfirm(){
                let data ={}
                if (this.memoType == 0){
                    data.id = this.studentIn[this.index]._id
                }
                else if (this.memoType == 1){
                    data.id = this.studentOut[this.index]._id
                }
                if (data.id == undefined){
                    this.$alert('出错了')
                    return false
                }
                data.memo = this.memo
                request({
                    url :'/classOrder/editMemo',
                    method : 'post',
                    data : data
                }).then(res =>{
                    this.showDialog = false
                    if (res.code == 200){
                        if (this.memoType == 0){
                            this.studentIn[this.index].memo = this.memo
                        }

                        else if (this.memoType == 1){
                             this.studentOut[this.index].memo = this.memo
                        }
                        this.memo = ''
                        this.index = 0
                        this.memoType = 0
                    }
                })
            },

            getClassOrderDetail() {
                request({
                    url: "/classOrder/getClassOrderOne",
                    method: "post",
                    data: {_id: this.class_order_id}
                }).then(res => {
                    if (res.code == 200) {
                        this.class_order = res.data
                        this.class_order.createdAtText = formatTime.formatTime(this.class_order.createdAt)
                        this.studentIn = this.class_order.studentIn

                        this.studentIn.forEach((value, index) => {
                            this.studentIn[index].student.gender = value.student.gender===0?'男':'女'
                            this.studentIn[index].amount = this.studentIn[index].amount || 1

                        })
                        this.studentOut = this.class_order.studentOut
                        this.studentOut.forEach((value, index) => {

                            this.studentOut[index].student.gender = value.student.gender===0?'男':'女'

                        })
                    }
                });
            },

            gotoStudent(id){
                this.$router.push({path:'/student-detail?id=' + id})
            },

            absent(id){
                console.log(id,'sd')
                this.$confirm('确认缺课会减少上课提成。学生相应课时也会调整。','确认该学生该节课缺席吗？',{
                    confirmButtonText:'确定',
                    cancelButtonText : '取消'
                }).then(()=>{
                    request({
                    url: "/classOrder/updateClassOrderAbsent",
                    method: "post",
                    data: {id: id}
                }).then(res => {
                    this.getClassOrderDetail()
                })
            })
        },
                    show(id){
                this.$confirm('确认出席会增加上课提成。学生相应课时也会调整。','确认该学生该节课出席吗？',{
                    confirmButtonText:'确定',
                    cancelButtonText : '取消'
                }).then(()=>{
                    request({
                    url: "/classOrder/updateClassOrderShow",
                    method: "post",
                    data: {id: id}
                }).then(res => {
                    if (res.code == 200){
                        this.getClassOrderDetail()
                    }
                    else{
                        this.$alert('余额不足或者已经过期','操作失败')
                    }
                })
            })
            }

        },



        created() {
            if (this.$route.query.id != undefined) {
                this.class_order_id = this.$route.query.id;
                this.getClassOrderDetail()
            }
        }
    }
</script>
